<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VNC Console - {{.VMName}}</title>
    <script src="https://cdn.jsdelivr.net/npm/@novnc/novnc@1.4.0/core/rfb.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #1a1a1a;
            color: #e0e0e0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        .header {
            background: #2d2d2d;
            padding: 1rem;
            border-bottom: 1px solid #3d3d3d;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            font-size: 1.2rem;
            color: #61dafb;
        }
        
        .status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #f44336;
            animation: pulse 2s infinite;
        }
        
        .status-dot.connected {
            background: #4caf50;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .controls {
            background: #2d2d2d;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid #3d3d3d;
            display: flex;
            gap: 0.5rem;
        }
        
        button {
            background: #3d3d3d;
            border: 1px solid #4d4d4d;
            color: #e0e0e0;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        button:hover {
            background: #4d4d4d;
        }
        
        button:active {
            background: #5d5d5d;
        }
        
        .console-container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            overflow: hidden;
        }
        
        #screen {
            max-width: 100%;
            max-height: 100%;
        }
        
        .footer {
            background: #2d2d2d;
            padding: 0.5rem 1rem;
            border-top: 1px solid #3d3d3d;
            font-size: 0.85rem;
            text-align: center;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🖥️ VNC Console - {{.VMName}}</h1>
        <div class="status">
            <div class="status-dot" id="status-dot"></div>
            <span id="status-text">Connecting...</span>
        </div>
    </div>
    
    <div class="controls">
        <button onclick="sendCtrlAltDel()">Ctrl+Alt+Del</button>
        <button onclick="toggleFullscreen()">Fullscreen</button>
        <button onclick="reconnect()">Reconnect</button>
        <button onclick="disconnect()">Disconnect</button>
    </div>
    
    <div class="console-container">
        <div id="screen"></div>
    </div>
    
    <div class="footer">
        virt-manager-go v{{.Version}} | © {{.Year}}
    </div>

    <script>
        let rfb = null;
        const wsURL = '{{.WSURL}}';
        
        function updateStatus(connected) {
            const dot = document.getElementById('status-dot');
            const text = document.getElementById('status-text');
            
            if (connected) {
                dot.classList.add('connected');
                text.textContent = 'Connected';
            } else {
                dot.classList.remove('connected');
                text.textContent = 'Disconnected';
            }
        }
        
        function connect() {
            try {
                rfb = new RFB(document.getElementById('screen'), wsURL);
                
                rfb.addEventListener('connect', () => {
                    console.log('VNC connected');
                    updateStatus(true);
                });
                
                rfb.addEventListener('disconnect', (e) => {
                    console.log('VNC disconnected:', e.detail.clean ? 'clean' : 'error');
                    updateStatus(false);
                    
                    if (!e.detail.clean) {
                        setTimeout(reconnect, 3000);
                    }
                });
                
                rfb.addEventListener('credentialsrequired', () => {
                    const password = prompt('Password required:');
                    if (password) {
                        rfb.sendCredentials({ password: password });
                    }
                });
                
                rfb.scaleViewport = true;
                rfb.resizeSession = true;
                
            } catch (err) {
                console.error('Failed to connect:', err);
                updateStatus(false);
            }
        }
        
        function disconnect() {
            if (rfb) {
                rfb.disconnect();
                rfb = null;
            }
            updateStatus(false);
        }
        
        function reconnect() {
            disconnect();
            setTimeout(connect, 1000);
        }
        
        function sendCtrlAltDel() {
            if (rfb) {
                rfb.sendCtrlAltDel();
            }
        }
        
        function toggleFullscreen() {
            const elem = document.documentElement;
            
            if (!document.fullscreenElement) {
                elem.requestFullscreen().catch(err => {
                    console.error('Failed to enter fullscreen:', err);
                });
            } else {
                document.exitFullscreen();
            }
        }
        
        // 自动连接
        connect();
        
        // 监听窗口关闭
        window.addEventListener('beforeunload', () => {
            disconnect();
        });
    </script>
</body>
</html>